/* You can add global styles to this file, and also import other style files */
@import "styles/_index.scss";

:root {
  --margin: 5px;
  --padding: 5px;
  --container-space: 16px;
  --bgcolor: #222426;
  --textcolor: #fff;
  --menu-bgcolor: #333;
  --menu-hovercolor: #606266;
}

* {
  box-sizing: border-box;
}

/* Provide sufficient contrast against dark background */
body {
  background-color: var(--bgcolor);
  color: var(--textcolor);
  font-family: 'Segoe UI', sans-serif;
}

button, select, input {
  line-height: 1.5em;
  border: 1px solid #666;
  border-radius: 4px;
  font-size: 0.8em;
  color: var(--textcolor);
  background: #555;
  outline: none;

  &:hover, &:focus {
    box-shadow: 0 0 5px rgba(192, 192, 192, .4);
  }
}

button, select {
  border-color: #777 #333 #333 #777;
  cursor: pointer;
  padding: 3px 16px;
  text-transform: uppercase;
}

input {
  border-color: #333 #777 #777 #333;
  margin: 0 var(--margin);
  padding: 3px;

  &[type=number] {
    text-align: end;
  }

  &[type=color] {
    border-radius: 50%;
    height: 24px;
    width: 24px;
    margin: 0;

    &::-webkit-color-swatch-wrapper {
      padding: 0;
    }

    &::-webkit-color-swatch {
      border: none;
      border-radius: 50%;
    }

    &::-moz-color-swatch {
      border: none;
      border-radius: 50%;
    }
  }
}

.container {
  margin: var(--container-space);
}
